<template>
	<view>
		<view v-if="showfriends">
			<view class="base">
				<view class="top">
					<text @click="tomsg" class="message">消息</text>
					<text class="friends">好友</text>
					<text @click="toqunliao" class="chat">群聊</text>
					<img @click="themore1" class="more" src="../../static/more .png"></img>
				</view>
				<view class="search">
					<view class="search1">
						<text class="search2">搜索</text>
					</view>
					<img class="searchphoto" src="../../static/search.png"></img>
				</view>
				<view class="addFriends">
					<img src="../../static/add.png" class="addFriends2"></img>
					<img src="../../static/radio-on-full.png" class="addFriends1"></img>
					<text class="addFriends3">好友验证</text>
				</view>
				<view class="character">
					<text class="friendtext">D</text>
				</view>
				<view class="addFriends">
					<img src="../../static/friend3.png" class="Friends2"></img>
					<img src="../../static/radio-on-full (1).png" class="addFriends1"></img>
					<text class="addFriends3">大白兔</text>

				</view>
				<view class="character">
					<text class="friendtext">F</text>
				</view>
				<view class="addFriends">
					<img src="../../static/friend1.png" class="Friends2"></img>
					<img src="../../static/radio-on-full (2).png" class="addFriends1"></img>
					<text class="addFriends3">锋锋</text>
				</view>
				<view class="character">
					<text class="friendtext">X</text>
				</view>
				<view class="addFriends">
					<img src="../../static/friend2.png" class="Friends2"></img>
					<img src="../../static/radio-on-full (3).png" class="addFriends1"></img>
					<text class="addFriends3">小雨</text>
				</view>
				<text class="characters">
					<text class="a">A</text>
					<text class="b">B</text>
					<text class="c">C</text>
					<text class="d">D</text>
					<text class="e">E</text>
					<text class="f">F</text>
					<text class="g">G</text>
					<text class="h">H</text>
					<text class="i">I</text>
					<text class="j">J</text>
					<text class="k">K</text>
					<text class="l">L</text>
					<text class="m">M</text>
					<text class="n">N</text>
					<text class="o">O</text>
					<text class="p">P</text>
					<text class="q">Q</text>
					<text class="r">R</text>
					<text class="s">S</text>
					<text class="t">T</text>
					<text class="u">U</text>
					<text class="v">V</text>
					<text class="w">W</text>
					<text class="x">X</text>
					<text class="y">Y</text>
					<text class="z">Z</text>
				</text>
			</view>
			<view class="mores" v-if="isshow1">
				<img src="../../static/mores.png" class="more1"></img>
			</view>
		</view>
		<view v-else-if="showqunliao">
			<view class="base22">
				<view class="top22">
					<text @click="tomsg" class="message22">消息</text>
					<text @click="tofri" class="friends22">好友</text>
					<text class="chat22">群聊</text>
					<img @click="themore2" class="more22" src="../../static/more .png"></img>
				</view>
				<view class="search22">
					<view class="search122">
						<text class="search222">搜索</text>
					</view>
					<img class="searchphoto22" @click="themore" src="../../static/search.png"></img>
				</view>

				<view class="qunzu22">
					<img src="../../static/qunzu.png" class="qunzu222"></img>
					<img src="../../static/radio-on-full (1).png" class="qunzu122"></img>
					<text class="qunzu322">冬日防疫小分队</text>
				</view>
				<view class="line22"></view>
				<view class="qunzu22">
					<img src="../../static/qunzu.png" class="qunzu222"></img>
					<img src="../../static/radio-on-full (1).png" class="qunzu122"></img>
					<text class="qunzu322">冬日学习小分队</text>
				</view>
				<view class="line22"></view>
			</view>
			<view class="mores22" v-if="isshow2">
				<img src="../../static/mores.png" class="more122"></img>
			</view>
		</view>
		<view v-else="showmsg">
			<view class="base">
				<view class="top">
					<text class="message33">消息</text>
					<text @click="tofri" class="friends33">好友</text>
					<text @click="toqunliao" class="chat33">群聊</text>
					<img @click="themore3" class="more" src="../../static/more .png"></img>
				</view>
				<view class="search">
					<view class="search1">
						<text class="search2">搜索</text>
					</view>
					<img class="searchphoto" src="../../static/search.png"></img>
				</view>
			</view>
			<view class="liaoTianKuang" @click="chat_one()">
				<img src="../../static/friend3.png" class="Friends2"></img>
				<img src="../../static/radio-on-full (1).png" class="addFriends1"></img>
				<view class="text2">
					<view class="name">
						大白兔
					</view>
					<view class="content">
						你好！
					</view>
				</view>
			</view>
			<view class="blank">
				<text class="friendtext"></text>
			</view>
			<view class="liaoTianKuang" @click="chat_two()">
				<img src="../../static/friend1.png" class="Friends2"></img>
				<img src="../../static/radio-on-full (2).png" class="addFriends1"></img>
				<view class="text2">
					<view class="name">
						锋锋
					</view>
					<view class="content">
						很高兴认识你！
					</view>
				</view>
			</view>
			<view class="blank">
				<text class="friendtext"></text>
			</view>
			<view class="liaoTianKuang" @click="chat_three()">
				<img src="../../static/friend2.png" class="Friends2"></img>
				<img src="../../static/radio-on-full (3).png" class="addFriends1"></img>
				<view class="text2">
					<view class="name">
						小雨
					</view>
					<view class="content">
						你好你好！
					</view>
				</view>
			</view>
			<view class="blank">
				<text class="friendtext"></text>
			</view>
			<view class="mores33" v-if="isshow3">
				<img src="../../static/mores.png" class="more1"></img>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow1: false,
				isshow2: false,
				isshow3: false,
				showfriends: false,
				showqunliao: false,
				showmsg: true
			}
		},
		methods: {
			chat_one() {
				uni.navigateTo({
					url: '/pages/chat_one/chat_one'
				})
			},
			chat_two() {
				uni.navigateTo({
					url: '/pages/chat_two/chat_two'
				})
			},
			chat_three() {
				uni.navigateTo({
					url: '/pages/chat_three/chat_three'
				})
			},
			themore1() {
				this.isshow1 = !this.isshow1
			},
			themore2() {
				this.isshow2 = !this.isshow2
			},
			themore3() {
				this.isshow3 = !this.isshow3
			},
			tomsg() {
				this.showfriends = false,
					this.showqunliao = false,
					this.showmsg = true
			},
			tofri() {
				this.showfriends = true,
					this.showqunliao = false,
					this.showmsg = false
			},
			toqunliao() {
				this.showfriends = false,
					this.showqunliao = true,
					this.showmsg = false
			}

		}
	}
</script>

<style>
	.blank {
		background-color: white;
		height: 25px;
		margin-top: 5px;
	},

	.liaoTianKuang {
		margin-top: 5px;
		margin-left: 15px;
		display: flex;
		line-height: 28upx;
	}

	.text2 {
		flex-direction: column;
		display: flex;
		position: relative;
		justify-content: space-between;
	}

	.base {
		position: relative;
		z-index: 0;
	}

	.mores {
		position: relative;
		z-index: 7;
		top: -400px;
		left: 200px;
	}
	.mores33 {
		position: relative;
		z-index: 7;
		top: -340px;
		left: 200px;
	}

	.more1 {
		height: 175px;
	}

	,
	.top {
		margin-left: 5%;
		margin-top: 3%;
		font-size: 18px;
		display: flex;
		line-height: 28upx;
		align-items: center;
	}

	,
	.friends {
		padding-left: 7%;
		font-size: 20px;
		color: #1D65E3;
	}

	,
	.message33 {
		font-size: 20px;
		color: #1D65E3;
	}
	
	,
	.chat33 {
		padding-left: 7%;
	}
	.friends33 {
		padding-left: 8%;
	}
	.chat {
		padding-left: 8%;
	}

	,
	.more {
		padding-left: 40%;
	}

	,
	.search {
		background-color: #e6e6e6;
		height: 52px;

	}

	,
	.search1 {
		border: 1px solid #999;
		background-color: white;
		border-radius: 25px;
		padding-top: 2px;
		padding-left: 335px;
		padding-bottom: 32px;
		position: absolute;
		margin-left: 20px;
		margin-top: 7px;

	}

	,
	.search2,
	.searchphoto {
		position: relative;
	}

	,
	.search2 {
		position: fixed;
		left: 50%;
		top: 70px;
		font-size: 30rpx;
		color: #8a8a8a;
		z-index: 1;
	}

	,
	.searchphoto {
		height: 30px;
		width: 30px;
		padding-left: 150px;
		padding-top: 12px;
		z-index: 2;
	}

	,
	.addFriends {
		margin-top: 5px;
		margin-left: 15px;
		display: flex;
		line-height: 28upx;
		align-items: center;
	}

	,
	.addFriends1 {
		position: relative;
		z-index: 0;
		width: 15vw;
	}

	,
	.addFriends2 {
		position: absolute;
		width: 35px;
		height: 35px;
		z-index: 2;
		padding-left: 10px;
		padding-top: 1px;
	}

	,
	.addFriends3 {
		padding-left: 20px;
		margin-top: 5srpx;
		letter-spacing: 2px;
		font-size: 14px;
	}

	,
	.character {
		background-color: #e6e6e6;
		height: 25px;
		margin-top: 5px;
	}

	,
	.friendtext {
		padding-left: 12px;
		font-size: 30rpx;
		color: #8a8a8a;
	}

	,
	.Friends2 {
		position: absolute;
		width: 45px;
		height: 45px;
		z-index: 2;
		padding-left: 6px;
		padding-bottom: 2px;
	}

	,
	.characters {
		font-size: 8px;
		color: #8a8a8a;

	}

	,
	.a {
		position: absolute;
		right: 5px;
		top: 175px;
	}

	,
	.b {
		position: absolute;
		right: 5px;
		top: 190px;
	}

	,
	.c {
		position: absolute;
		right: 5px;
		top: 205px;
	}

	,
	.d {
		position: absolute;
		right: 4px;
		top: 220px;
		color: #1D65E3;
	}

	,
	.e {
		position: absolute;
		right: 6px;
		top: 235px;

	}

	,
	.f {
		position: absolute;
		right: 6px;
		top: 250px;
	}

	,
	.g {
		position: absolute;
		right: 5px;
		top: 265px;
	}

	,
	.h {
		position: absolute;
		right: 5px;
		top: 280px;
	}

	,
	.i {
		position: absolute;
		right: 7px;
		top: 295px;
	}

	,
	.j {
		position: absolute;
		right: 7px;
		top: 310px;
	}

	,
	.k {
		position: absolute;
		right: 6px;
		top: 325px;
	}

	,
	.l {
		position: absolute;
		right: 6px;
		top: 340px;
	}

	,
	.m {
		position: absolute;
		right: 4px;
		top: 355px;
	}

	,
	.n {
		position: absolute;
		right: 5px;
		top: 370px;
	}

	,
	.o {
		position: absolute;
		right: 5px;
		top: 385px;
	}

	,
	.p {
		position: absolute;
		right: 6px;
		top: 400px;
	}

	,
	.q {
		position: absolute;
		right: 5px;
		top: 415px;
	}

	,
	.r {
		position: absolute;
		right: 6px;
		top: 430px;
	}

	,
	.s {
		position: absolute;
		right: 6px;
		top: 445px;
	}

	,
	.t {
		position: absolute;
		right: 6px;
		top: 460px;
	}

	,
	.u {
		position: absolute;
		right: 5px;
		top: 475px;
	}

	,
	.v {
		position: absolute;
		right: 5px;
		top: 490px;
	}

	,
	.w {
		position: absolute;
		right: 3px;
		top: 505px;
	}

	,
	.x {
		position: absolute;
		right: 5px;
		top: 520px;
	}

	,
	.y {
		position: absolute;
		right: 5px;
		top: 535px;
	}

	,
	.z {
		position: absolute;
		right: 5px;
		top: 550px;
	}

	,
	.base22 {
		position: relative;
		z-index: 0;
	}

	,
	.mores22 {
		position: relative;
		z-index: 7;
		top: -200px;
		left: 200px;
	}

	,
	.more122 {
		height: 175px;
	}

	,
	.top22 {
		margin-left: 5%;
		margin-top: 3%;
		font-size: 18px;
		display: flex;
		line-height: 28upx;
		align-items: center;
	}

	,
	.friends22 {
		padding-left: 7%;

	}

	,
	.chat22 {
		font-size: 20px;
		color: #1D65E3;
		padding-left: 8%;
	}

	,
	.more22 {
		padding-left: 40%;
	}

	,
	.search22 {
		background-color: #e6e6e6;
		height: 52px;

	}

	,
	.search122 {
		border: 1px solid #999;
		background-color: white;
		border-radius: 25px;
		padding-top: 2px;
		padding-left: 335px;
		padding-bottom: 32px;
		position: absolute;
		margin-left: 20px;
		margin-top: 7px;

	}

	,
	.search222,
	.searchphoto22 {
		position: relative;
	}

	,
	.search222 {
		position: fixed;
		left: 50%;
		top: 70px;
		font-size: 30rpx;
		color: #8a8a8a;
		z-index: 1;
	}

	,
	.searchphoto22 {
		height: 30px;
		width: 30px;
		padding-left: 150px;
		padding-top: 12px;
		z-index: 2;
	}

	,
	.qunzu22 {
		margin-top: 5px;
		margin-left: 15px;
		display: flex;
		line-height: 28upx;
		align-items: center;
	}

	,
	.qunzu122 {
		position: relative;
		z-index: 0;
		width: 15vw;
	}

	,
	.qunzu222 {
		position: absolute;
		width: 35px;
		height: 35px;
		z-index: 2;
		padding-left: 10px;
		padding-top: 1px;
	}

	,
	.qunzu322 {
		padding-left: 20px;
		margin-top: 5srpx;
		letter-spacing: 2px;
		font-size: 14px;
	}

	,
	.line22 {
		background-color: #e6e6e6;
		height: 2px;
		margin-top: 5px;
	}
</style>
